<template>
	<view class="container">
		<view v-for="(bless, index) in blessList" :key="index" class="bless" :style="bless.style">
			<text class="bless-text" :class="{'hide': bless.hide}">{{ bless.text }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				blessList: [], // 存储随机元素的数组
			};
		},
		mounted() {
			this.startAnimation(); // 初始化动画
		},
		methods: {
			startAnimation() {
				// 清空之前的元素数据
				this.blessList = [];

				// 获取屏幕宽高
				const {
					windowWidth,
					windowHeight
				} = uni.getSystemInfoSync();
				const blessCount = 10; // 设置要显示的元素数量

				// 随机生成元素数据
				for (let i = 0; i < blessCount; i++) {
					const text = getRandomText();
					const style = this.getRandomStyle(windowWidth, windowHeight);

					this.blessList.push({
						text,
						style,
						hide: false,
					});
				}

				// 开始动画
				this.animateTexts();
			},
			getRandomStyle(windowWidth, windowHeight) {
				const left = getRandomNum(0, windowWidth);
				const top = getRandomNum(0, windowHeight);
				const direction = getRandomDirection();

				return `left: ${left}px;top: ${top}px;transform: rotate(${direction}deg);`;
			},
			animateTexts() {
				this.blessList.forEach((bless) => {
					this.animateText(bless);
				});
			},
			animateText(bless) {
				const duration = 3000; // 动画持续时间（毫秒）
				const delay = getRandomNum(0, 2000); // 延迟时间（毫秒）

				setTimeout(() => {
					// bless.hide = false; // 显示文字

					// 创建动画实例
					uni.createAnimation({
							duration: duration / 2,
							timingFunction: 'linear',
						})
						.translateY('-100%') // 文字向上移动
						.step()
						.translateY('0') // 文字恢复原位置
						.step({
							duration: duration / 2
						})
						.opacity(0) // 文字逐渐消失
						.step();

					bless.hide = false; // 隐藏文字

					// 重新出现动画
					setTimeout(() => {
						bless.style = this.getRandomStyle(uni.getSystemInfoSync().windowWidth, uni
							.getSystemInfoSync().windowHeight);
						this.animateText(bless);
					}, duration + delay);
				}, delay);
			},
		},
	};

	// 生成指定范围内的随机数
	function getRandomNum(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	// 随机获取文本
	function getRandomText() {
		const texts = [
			"I like you",
			"Me gustas",
			"Te quiero",
			"Ich mag dich",
			"Mi piaci",
			"Eu gosto de você",
			"Мне нравишься",
			"喜欢你",
			"너를 좋아해",
			"好きです",
			"أعجب بك",
			"Ik vind je leuk",
			"Je t'aime", // 法语 
			"Ti amo", // 意大利语 
			"Ich liebe dich", // 德语 
			"Eu te amo", // 葡萄牙语 
			"Je t'adore", // 法语 
			"Jeg elsker dig", // 丹麦语 
			"Mahal kita", // 菲律宾语 
			"S'agapo", // 希腊语 
			"Mwen renmen ou", // 海地克里奥尔语 
			"I like you",
			"Me gustas",
			"Te quiero",
			"Ich mag dich",
			"Mi piaci",
			"Eu gosto de você",
			"Мне нравишься",
			"喜欢你",
			"너를 좋아해",
			"好きです",
			"أعجب بك",
			"Ik vind je leuk",
			"Je t'aime", // 法语 
			"Ti amo", // 意大利语 
			"Ich liebe dich", // 德语 
			"Eu te amo", // 葡萄牙语 
			"Je t'adore", // 法语 
			"Jeg elsker dig", // 丹麦语 
			"Mahal kita", // 菲律宾语 
			"S'agapo", // 希腊语 
			"Mwen renmen ou", // 海地克里奥尔语 
		]
		const randomIndex = getRandomNum(0, texts.length - 1);
		return texts[randomIndex];
	}

	// 随机获取元素旋转方向
	function getRandomDirection() {
		return getRandomNum(0, 360);
	}
</script>

<style>
	.container {
		width: 100vw;
		height: 100vh;
		position: relative;
	}

	.bless {
		position: absolute;
	}

	.bless-text {
		transition: opacity 0.3s ease-out;
	}

	.hide {
		opacity: 0;
	}
</style>